<!--
 * @Description  : 我的笔记
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-11
-->
<template>
  <AppPage
    header-class="bg-[#fcd006]"
    article-class="p-0 overflow-hidden;"
    :left-icon="{ icon: 'pajamas:chevron-lg-left', size: 24, path: 'personal-center' }"
    :right-icon="{ icon: '', size: 0, path: '' }"
  >
    <header class="bg-[#fcd006]">
      <div w-80vw m-x-auto>
        <nut-searchbar v-model="searchValue" background="none">
          <template #leftin>
            <TheIcon class="icon" icon="ion:ios-search" :size="18" />
          </template>
        </nut-searchbar>
      </div>
      <p text-center m-20>{{ nodeNum.totalWords }}本书&nbsp;&nbsp;/&nbsp;&nbsp;{{ nodeNum.worksCount }}字笔记</p>
      <section bg-white rd-tl-20 rd-tr-20>
        <div flex justify-around items-center>
          <div v-for="(item, index) in worksTypeList" :key="index" m-y-20 @click="changeWorksType(index)">
            <div rd-20 text-center py-5 :class="worksTypeTab === index ? 'bg-[#fcd006]' : 'bg-white'">
              <TheIcon :icon="item.icon" :size="24" />
              <div w-60 text-12>{{ item.title }}</div>
            </div>
          </div>
        </div>
      </section>
    </header>

    <section class="bg-[#f4f4f4] h-70vh w-100vw bottom-0"></section>
  </AppPage>
  <!-- <div class="page">
    <router-link to="personal-center">
      <div class="theicon">
        <TheIcon class="icon" icon="pajamas:chevron-lg-left" :size="24" />
      </div>
    </router-link>

    <nut-searchbar class="search">
      <template #leftin>
        <div mt-12><TheIcon class="icon" icon="ion:ios-search" :size="18" /></div>
        <Search2 />
      </template>
    </nut-searchbar>

    <div class="books">
      <div class="book"><span>0本书</span><span>/0字笔记</span></div>
    </div>

    <div class="list">
      <nut-grid :column-num="worksTypeList.length" :border="false">
        <nut-grid-item v-for="(grid, index) in worksTypeList" :key="index" mt-20 color-black :text="grid.typeName">
          <TheIcon :icon="grid.icon || 'game-icons:open-book'" :size="25" />
        </nut-grid-item>
      </nut-grid>
    </div>

    <div class="bottom"><nut-empty description="无数据"></nut-empty></div>
  </div> -->
</template>

<script setup>
import { noteCount, note } from '@/api/works'
const searchValue = ref('')
const worksTypeList = ref([
  { title: '全部', type: 0, icon: 'material-symbols:border-all-rounded' },
  { title: '有声书', type: 1, icon: 'material-symbols:menu-book-outline-sharp' },
  { title: '电子书', type: 2, icon: 'game-icons:open-book' }
])
const worksTypeTab = ref(0)
const nodeNum = ref({})
const nodeList = ref([])

/** 修改我的书架 tab */
const changeWorksType = value => {
  worksTypeTab.value = value
  console.log(worksTypeTab.value)
  getNote()
}

onMounted(() => {
  getNoteCount()
  getNote()
})

const getNoteCount = async () => {
  const { data: result } = await noteCount()
  nodeNum.value = result
}

const getNote = async () => {
  const { data: result } = await note(worksTypeTab.value)
  console.log(result)
  // nodeList.value = result
}
</script>
<style>
:root {
  --nut-searchbar-input-padding: 20px;
  --nut-searchbar-input-border-radius: 10px;
}
</style>
